<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:cc="http://java.sun.com/jsf/composite">

	<h:body>
	
		<ui:composition template="/template/common.xhtml"> 
			<ui:define name="title">Google Drive Light</ui:define>
    		<ui:define name="content">
    		
    			<!-- Barre de recherche du drive -->
				<h:form styleClass="search" id="searchBar">  
					<h:graphicImage value="/resources/images/logo_128.png" styleClass="logo" alt="logo" /> 	    							
					<div id="searchInput">
						<p:inputText value="#{driveManagedBean.pattern}" id="searchid" size="35"/>
						<p:watermark value="#{msg['searchInput']}" for="searchid" />
						
						<p:commandButton value="#{msg['search']}" 
										 icon="ui-icon-search" 
										 actionListener="#{driveManagedBean.search}" 
										 update=":formTable :formTree :formBreadCrumb :formToolbar :formDetails" />	
					</div> 
					<div class="clear" />
				</h:form>    			
    			
				<!-- Barre d'outils contenant l'import, la création... -->
				<h:form id="formToolbar">
					<p:toolbar>
						<p:toolbarGroup align="left">
							<p:menuButton value="#{msg['create']}" disabled="#{driveManagedBean.pattern != null}">  		
						    	<ui:insert name="header" >
									<ui:include src="/template/drive/creationMenu.xhtml" />
								</ui:insert>    
							</p:menuButton>
							<p:commandButton value="#{msg['import']}"
											 ajax="true" 
											 type="button"  
											 icon="ui-icon-document" 
											 onclick="dlgUpload.show()"
											 disabled="#{driveManagedBean.pattern != null}" />		
											 					
						</p:toolbarGroup>
					</p:toolbar>
				</h:form>
					
				<!-- Les éléments suivants sont organisés selon un layout -->
				<p:layout styleClass="driveContent">
				
					<!-- Arbre du drive (gauche) -->
					<p:layoutUnit header="#{msg['drive']}" position="west" size="330" styleClass="noBorder">
				    	<h:form id="formTree">
				    
							<!-- Contextmenu de l'arbre pour le noeud root -->							    
							<p:contextMenu for="tree" nodeType="drive"> 
								<p:submenu label="#{msg['create']}" icon="ui-icon-plus">
									<ui:insert name="menu" >
										<ui:include src="/template/drive/creationMenu.xhtml" />
									</ui:insert>
								</p:submenu> 
							</p:contextMenu> 
				      
				      		<!-- Contextmenu de l'arbre pour les noeuds standards -->
							<p:contextMenu for="tree" nodeType="default"> 
								<p:submenu label="#{msg['create']}" icon="ui-icon-plus">
									<ui:insert name="menu" >
										<ui:include src="/template/drive/creationMenu.xhtml" />
									</ui:insert>
								</p:submenu>
						      	<p:menuitem value="#{msg['delete']}" 
						      			    update=":formTable :formTree :formBreadCrumb" 
						      				icon="ui-icon-trash" action="#{driveManagedBean.deleteDirectory}" />  
						    </p:contextMenu> 
				   	
				   			<!-- Tree représentant l'arbre. -->
							<p:tree value="#{driveManagedBean.model}" 
									var="node" 
									dynamic="true" 
									cache="true" 
									id="tree" 
									selection="#{driveManagedBean.selectedNode}"                          
									selectionMode="single"
									styleClass="noBorder">
                                              
								<p:ajax event="select" 
										listener="#{driveManagedBean.onNodeSelect}" 
										update=":formTable :formBreadCrumb :formToolbar :formDetails" />         
								           
								<p:treeNode type="default" 
											rendered="#{node.directory}" 
											styleClass="#{!node.directory ? 'noDisplayTreeNode' : ''}">
								  
								  <h:graphicImage alt="folder" value="/resources/images/folder.png" /> 
								  <h:outputText value=" #{node}" />
								</p:treeNode>
								
								<p:treeNode type="drive" 
											rendered="#{node.directory}" 
											styleClass="#{!node.directory ? 'noDisplayTreeNode' : ''}">
								  
								  <h:graphicImage alt="folder" value="/resources/images/folder.png" /> 
								  <h:outputText value=" #{node}" />
								</p:treeNode>								
							</p:tree>           
						</h:form>				
					</p:layoutUnit>					    
				  
					<!-- Détails d'un répertoire (centre) -->
					<p:layoutUnit position="center" styleClass="noBorder" size="100">
						
						<h:form id="formBreadCrumb">
							<p:breadCrumb styleClass="toolbar" model="#{driveManagedBean.breadCrumb}" />
					    	<div class="space" />
						</h:form>
						
					    <h:form id="formTable">
				    
					    	<!-- Contextmenu de la table -->
							<p:contextMenu for="table"> 
					     		<p:menuitem value="#{msg['delete']}" 				     		 
					     					action="#{driveManagedBean.deleteFile}"
					     					update=":formTable :formTree :formBreadCrumb :formToolbar" 
					     					icon="ui-icon-trash" />  
					   		</p:contextMenu> 
					   			    							    		    
							<!-- Définition de la table -->			  
							<p:dataTable id="table" var="file" value="#{driveManagedBean.dirContent}" 
										 selection="#{driveManagedBean.selectedFile}"
							             selectionMode="single" rowKey="#{file.data.path}"
							             styleClass="noBorder"
							             emptyMessage="#{msg['emptyDirectory']}">		        
					     			       	
					      		<p:ajax event="rowSelect" 
					      				listener="#{driveManagedBean.onRowSelect}" 
					      				update=":formTable :formTree :formBreadCrumb :formToolbar :formDetails"/>
					      			     
					      		<p:ajax event="sort" update=":formTree"/>
					      			        
					      		<p:column sortBy="#{file.data.name}">
					          		<f:facet name="header">
					          			#{msg['name']}
					          		</f:facet>
					          		<h:graphicImage value="/resources/images/#{file.data.type.toString().toLowerCase()}.png"/> 
					          		<h:outputText value=" #{file.data.name}"/>
					      		</p:column>
					
					      		<p:column sortBy="#{file.data.type}">
					          		<f:facet name="header">
										#{msg['type']}
					          		</f:facet>
					          		<h:outputText value="#{file.data.type}" />
					      		</p:column>
					
								<p:column sortBy="#{file.data.size}">
								    <f:facet name="header">
										#{msg['size']}
								    </f:facet>
								    <h:outputText value="#{file.data.size}"> 
								    	<f:convertNumber pattern="#.## Ko" /> 
								    </h:outputText>
								</p:column>
					
								<p:column>
								    <f:facet name="header">
										#{msg['lastModif']}
								    </f:facet>
								    <h:outputText value="#{file.data.lastModified}">
								    	<f:convertDateTime dateStyle="short" type="both" /> 
								    </h:outputText>
								</p:column>	
										        
					    	</p:dataTable>
						</h:form>						
					</p:layoutUnit>
					
					<!-- Affichage du détail sur le fichier sélectionné. -->    
					<p:layoutUnit header="#{msg['details']}" position="east" styleClass="noBorder" size="330">
						<h:form id="formDetails">
							<h:panelGrid columns="2">
								<h:outputText value="#{msg['fileDetails']}" rendered="#{driveManagedBean.selectedFile == null}"/>
								<h:outputText value="#{driveManagedBean.selectedFile.data.name}" /> <br />
								<h:outputText value="#{driveManagedBean.selectedFile.data.size}">
									<f:convertNumber pattern="#.## Ko" />
								</h:outputText><br />	
								<h:outputText value="#{driveManagedBean.selectedFile.data.type}" /> <br />	
								<h:outputText value="#{driveManagedBean.selectedFile.data.owner}" /> <br />				         
							</h:panelGrid>
						</h:form>
    				</p:layoutUnit>    
				</p:layout>
			    
			    <!-- Dialog permettant l'upload d'un fichier -->
			     <p:dialog header="#{msg['uploadFileDialogTitle']}" widgetVar="dlgUpload" draggable="false" resizable="false" modal="true">
				    <h:form id="formUpload" enctype="multipart/form-data">
			    		<p:fileUpload fileUploadListener="#{driveManagedBean.handleFileUpload}"
			        	          	  mode="advanced" 			        	              
			            	          update="messages :formTable"
			                          sizeLimit="700000"
			                          label="#{msg['chooseFile']}"
			                          cancelLabel="#{msg['cancel']}"
			                          uploadLabel="#{msg['import']}"
			                          invalidSizeMessage="#{msg['invalidFileSize']}"
			                          showButtons="true"/>
			                      
						<p:growl id="messages" showDetail="true"/>
						<p:separator />
						<p:commandButton styleClass="buttonDialog" 
										 value="#{msg['quit']}" 
										 oncomplete="dlgUpload.hide();"
										 ajax="true" 
										 update=":formUpload"/>
					</h:form>
			    </p:dialog>  
    		
	   			<ui:insert name="dialog" >
		  			<ui:include src="/template/drive/dialog.xhtml" />
				</ui:insert>
    		
    		</ui:define>
    	</ui:composition>

</h:body>
</html>